import { userSettingsQuery } from '@automattic/api-queries';
import { useSuspenseQuery } from '@tanstack/react-query';
import { __ } from '@wordpress/i18n';
import Breadcrumbs from '../../app/breadcrumbs';
import { PageHeader } from '../../components/page-header';
import PageLayout from '../../components/page-layout';
import SecurityTwoStepAuthEmptyState from './empty-state';
import SecurityTwoStepAuthMainPage from './main-page';

export default function SecurityTwoStepAuth() {
	const { data: userSettings } = useSuspenseQuery( userSettingsQuery() );

	const { two_step_enabled, two_step_sms_enabled, two_step_enhanced_security_forced } =
		userSettings;

	const twoStepEnabledDescription = two_step_sms_enabled
		? __(
				'When you log in to WordPress.com, you‘ll need to enter your username and password, as well as a unique passcode sent to you via text message.'
		  )
		: __(
				'When you log in to WordPress.com, you’ll need to enter your username and password, as well as a unique passcode generated by an app on your mobile device.'
		  );

	return (
		<PageLayout
			size="small"
			header={
				<PageHeader
					prefix={ <Breadcrumbs length={ 2 } /> }
					title={ __( 'Two-step authentication' ) }
					description={
						two_step_enabled
							? twoStepEnabledDescription
							: __(
									'Keep your account extra safe with two-step authentication. You‘ll use your password plus a temporary code from your phone to sign in.'
							  )
					}
				/>
			}
		>
			{ two_step_enabled ? (
				<SecurityTwoStepAuthMainPage userSettings={ userSettings } />
			) : (
				<SecurityTwoStepAuthEmptyState
					isEnforcedByOrganization={ two_step_enhanced_security_forced }
				/>
			) }
		</PageLayout>
	);
}
